.address-container {
  height: fit-content;

  .title-container {
    width: 100%;
    height: 180rpx;

    .title-text {
      width: fit-content;
      height: fit-content;
    }
  }

  .address-container {
    height: fit-content;

    .address-form {
      height: fit-content;

      .name-container {
        border-bottom: 1rpx solid #ededed;

        .name-left {
          view {
            flex: 1;
            width: 100%;
            height: 100%;
            font-size: 30rpx;
            font-weight: bold;
            line-height: 100rpx;
          }
        }

        .name-right {
          width: calc(100% - 150rpx);

          .name-input-container {
            height: 50%;
            line-height: 100rpx;
            border-bottom: 1rpx solid #efefef;

            .name-placeholder {
              top: -100%;
            }
          }

          .gender-container {
            height: 50%;

            .gender-btn {
              width: 140rpx;
              height: 60rpx;
              margin-top: 20rpx;
              margin-right: 20rpx;
              border-radius: 14rpx;
              text-align: center;
              line-height: 58rpx;
              transition-property: border, color;
              transition-duration: 300ms;
            }

            .gender-btn--default {
              border: 1rpx solid #e3e3e3;
              color: #808080;
            }

            .gender-btn--selected {
              border: 1rpx solid $primary-color !important;
              color: $primary-color !important;
            }
          }
        }
      }

      .phone-container {
        border-bottom: 1rpx solid #efefef;

        .phone-left {
          view {
            line-height: 100rpx;
          }
        }

        .phone-right {
          width: calc(100% - 150rpx);
          line-height: 100rpx;

          .phone-placeholder {
            top: -100%;
          }
        }
      }

      .area-container {
        border-bottom: 1rpx solid #efefef;

        .area-left {
          view {
            line-height: 100rpx;
          }
        }

        .area-right {
          width: calc(100% - 150rpx);
          line-height: 100rpx;

          .input {
            width: calc(100% - 80rpx);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .area-placeholder {
            width: calc(100% - 80rpx);
            top: -100%;
          }

          .picker-btn {
            top: -200%;
          }
        }
      }

      .detail-container {
        border-bottom: 1rpx solid #efefef;

        .detail-left {
          view {
            line-height: 100rpx;
          }
        }

        .detail-right {
          width: calc(100% - 150rpx);
          line-height: 100rpx;

          input {
            width: calc(100% - 80rpx);
          }

          .detail-placeholder {
            width: calc(100% - 80rpx);
            top: -100%;
          }

          .map-btn {
            top: -200%;
          }
        }
      }
    }

    .confirm-btn {
      line-height: 94rpx;
      border-radius: 20rpx;
    }
  }
}

::v-deep .u-drawer-content, .u-picker-header, .u-datetime-picker {
  border-radius: 30rpx;
}